<template>
  <div class="background" style="height: 100vh;display: flex;align-items: center;justify-content: center;background-color: #20ab6c">
    <div style="display: flex;background-color: white;width: 35%;border-radius: 10px;overflow: hidden">
      <div style="flex: 1;width: 70%">
        <img alt="" src="@/assets/login2.jpeg" style="height:530px;">
      </div>
      <div style="flex: 1;display: flex;align-items:center;justify-content: center">
        <el-form ref="resetPassRef" :model="user" :rules="rules">
          <div style="font-size: 20px; font-weight: bold;padding: 0 0 40px">
            <span @click="returnLogin"><i class="el-icon-back"></i></span>
            <span>  忘记密码</span>
          </div>
          <el-form-item prop="username">
            <el-input v-model="user.username" placeholder="请输入账号" prefix-icon="el-icon-user" size="medium"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="user.password" placeholder="请输入新密码" prefix-icon="el-icon-lock" show-password size="medium"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="background-color: #39AC6A;width: 100%" type="success" @click="resetPass">修改密码</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "resetPass",
  data(){
    const validateCheckPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.user.password){
        callback(new Error('两次输入密码不一致!'));
      }
    };
    return{
      user:{
        username: "",
        password: "",
      },
      rules:{
        username:[
          {required : true,message:'请输入账号',trigger:'blur'}
        ],
        password:[
          {required : true,message:'请输入密码',trigger:'blur'},
        ],
        checkPass:[
          {validator: validateCheckPass, trigger: 'blur'},
        ],
      }
    }
  },
  methods:{
    returnLogin(){
      this.$router.push('/login');
    },
    resetPass(){
      this.$refs.resetPassRef.validate(valid => {
        if (valid) {
          axios({
            url:'/user/forgetPass',
            method:'put',
            data:this.user
          }).then(res=>{
            if(res.code === '200'){
              this.$message.success("修改密码成功！")
              setTimeout(()=>{
                this.$router.push('/login');
              },1000)
            }else{
              this.$message.error(res.msg)
            }
          })
        }
      })

    }
  }
}
</script>

<style scoped>
.background {
  background-image: url("@/assets/backgroundplus.jpg");
  background-repeat: no-repeat;
}
</style>